<template>
  <div>
    <van-field
      v-model="address"
      label="门牌号"
      placeholder="详细地址,例1层101室1"
      maxlength="20"
    />
    <van-radio-group v-model="label">
      <van-cell-group>
        <van-radio name="home" label="家" />
        <van-radio name="company" label="公司" />
        <van-radio name="school" label="学校" />
        <van-radio name="parents" label="父母家" />
      </van-cell-group>
    </van-radio-group>
    <van-field
      v-model="contactName"
      label="联系人"
      placeholder="请填写收货人的姓名"
      maxlength="20"
    />
    <van-radio-group v-model="sex">
      <van-cell-group>
        <van-radio name="male" label="先生" />
        <van-radio name="female" label="女士" />
      </van-cell-group>
    </van-radio-group>
    <van-field
      v-model="phoneNumber"
      label="手机号"
      placeholder="请填写收货手机号码"
      maxlength="11"
    />
    <van-button type="primary" block @click="saveAddress">保存地址</van-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router"; //导入接受路由参数的实例
import { showToast, showNotify } from "vant"; //导入vantUi的相关依赖
const route = useRoute();
const router = useRouter();
const address = ref("");
const label = ref("home");
const contactName = ref("");
const sex = ref("male");
const phoneNumber = ref("");

const saveAddress = () => {
  // 保存地址的逻辑
  console.log("地址:", address.value);
  console.log("标签:", label.value);
  console.log("联系人:", contactName.value);
  console.log("性别:", sex.value);
  console.log("手机号:", phoneNumber.value);
};
const onClickLeft = () => {
  router.back();
};
</script>

<style>
.address-form {
  padding: 16px;
}
</style>